import { useState, useEffect } from "react";
import { Form, message, Button } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { getLogsPage } from "../service";
import HeaderTab from "@/components/CommonTab";
import useColumns from "../cloumns/OutboundDetailCloumns";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import { SimpleTable } from "@/views/components/SearchTable/index";
const WarehouseDetailModal = ({ visible, checkedRows, record, handleCancel }) => {
	const [form] = Form.useForm();
	const [type, setType] = useState("1");
	const [list, setList] = useState([]);
	const [logList, setLogList] = useState([]);
	const tableRequest = getLogsPage;

	const tabArr = [
		{ key: "1", tab: "商品信息" },
		{ key: "2", tab: "出库单日志" }
	];
	const { defaultColumns, defaultColumns1 } = useColumns({});
	const [columns, setColumns] = useState(defaultColumns);
	const [columns1, setColumns1] = useState(defaultColumns1);
	const beforeQuerySearch = ({ API_DATA }) => {
		API_DATA.businessType = "product-outbound-order-log";
		API_DATA.bizNo = record.productOutboundNo;
		return { ...API_DATA };
	};
	const tableKey = "OutboundDetailModal231";
	const { fetchList, searchSimpleTableProps } = useTableConfig({
		tableKey,
		rowKey: "id",
		columns: columns1,
		tableRequest,
		autoFetch: true,
		hasPagination: true,
		hasQuickSearch: true,
		beforeQuerySearch,
		resetSourceData: false,
		hasColsSetting: true
	});
	useEffect(() => {
		setList(record ? record.descList : []);
		if (visible) {
			form.resetFields();
		}
	}, [visible]);
	// tab组件数据
	const HeaderTabProps = {
		type,
		data: tabArr,
		//tab改变
		onChange(val) {
			setType(val);
		}
	};

	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal
			title={{ title: "出库单详情" }}
			className="views-table-dialog"
			visible={true}
			onCancel={onCancel}
			width="1132px"
			minHeight="150px"
			footer={
				<Button size="middle" onClick={onCancel}>
					取消
				</Button>
			}
		>
			<HeaderTab {...HeaderTabProps} />
			<div className="views-container">
				{type == 1 && (
					<SimpleTable
						key={tableKey}
						mounted={false}
						{...{
							tableKey,
							rowKey: "Detail3212131",
							dataSource: list,
							columns: columns,
							footer: false
						}}
					/>
				)}
				{type == 2 && <SimpleTable key={tableKey} {...searchSimpleTableProps} />}
			</div>
		</CommonModal>
	);
};

export default WarehouseDetailModal;
